<template>
  <teleport to="body">
    <transition name="z-dialog-background">
      <div v-show="visible" class="z-dialog-background" v-bind="$attrs" @mousedown="closeDialog">
        <transition name="z-dialog">
          <div v-if="visible" class="z-dialog-wrapper" :class="{'auto-height': autoHeight, 'z-dialog-wrapper-h5': piniaSystem.getIsH5}" :style="`width:${width};`" @mousedown.stop>
            <div class="z-dialog-header" :class="headerFixed ? 'z-absolute' : ''" v-if="!hiddenTitle">
              <span class="z-dialog-header__title"><span class="z-dialog-header__left-button"><slot name="headerLeftButton"></slot></span>{{ title }}</span>
              <span class="z-dialog-header__close" @click="closeDialog">
                <div class="z-dialog-header__right-button">
                  <slot name="headerRightButton"></slot>
                </div>
                <i-iconoir-cancel />
              </span>
            </div>
            <div class="z-dialog-content" ref="zdialogcontentRef" :class="{'z-dialog-nofixed-title': !headerFixed}">
              <slot></slot>
            </div>
          </div>
        </transition>
      </div>
    </transition>
  </teleport>
</template>

<script setup lang="ts" name="Dialog">
import nocache from '@/store/nocache';
import system from '@/store/system';
import { throttle, bottomingOut } from '@/utils/format';
import { emit } from 'process';

const piniaNocache:any = nocache();
const piniaSystem: any = system();
const emits = defineEmits(['update:visible', 'hitBottom']);
const slots = useSlots();
const zdialogcontentRef:any = ref(null);
const props = defineProps({
  // 隐藏与显示
  visible: {
    type: Boolean,
    default: false,
  },
  // 隐藏与显示标题栏
  hiddenTitle: {
    type: Boolean,
    default: false,
  },
  autoHeight: {
    type: Boolean,
    default: false
  },
  // 标题
  title: {
    type: String,
    default: '',
  },
  // 头部标题栏是否浮动
  headerFixed: {
    type: Boolean,
    default: false,
  },
  width: {
    type: [Number, String],
    default: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? '100%' : 500 + 'rem',
  }
});

watch(
  () => props.visible,
  (val, preVal) => {
    nextTick(()=>{
      // 触底
      val && zdialogcontentRef.value.addEventListener('scroll', throttle(bottomingOut, 0.3));
    })
  },
  { immediate: false, deep: true },
);

watch(()=> piniaNocache.getHitBottom, ()=>{
  emits('hitBottom');
}, {})

const width = computed(()=>{
  if(typeof props.width === 'number'){
    return props.width + 'rem';
  }else{
    return props.width;
  }
});

// 关闭弹出层
const closeDialog = () => {
  emits('update:visible', false);
};

</script>

<style lang="scss" scoped>
@import url(./index.scss);
$timer: 0.5s;
$timer1: 0.5s;
.z-dialog-enter-active {
  animation: bounceInRight $timer;
}
.z-dialog-leave-active {
  animation: bounceOutRight $timer1;
}
.z-dialog-background-enter-active {
  animation: fadeIn $timer;
}
.z-dialog-background-leave-active {
  animation: fadeOut $timer;
}
</style>
